<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="@/static/home/home-bg.jpg" mode=""></image>
			</view>
		</view>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'进度查询'"></CustomNav>
		<view class="bottom">
			<view class="info-item">
				<view class="title-left">
					<view class="cod" v-if="form.code">
						投诉编码：{{form.code}}
					</view>
					<view class="cod" v-else="form.code">
						请输入正确的投诉编码
					</view>
					<view class="title-right" v-if="form.status==3" style="color: red;">
						已驳回
					</view>
					<view class="title-right" v-if="form.status==1" style="color: #FF8D02;">
						待受理
					</view>
					<view class="title-right" v-if="form.status==2" style="color: #027BFF;">
						已办结
					</view>
					<view class="title-right" v-if="form.status==4" style="color: #1BA035;">
						处理中
					</view>
				</view>
				<view class="string" style="margin: 20rpx 0;"></view>
				<view class="tips" v-if="form.status==1">
					该投诉正在等待受理。
				</view>
				<view class="tips" v-if="form.status==2">
					您的投诉已办理，感谢您的支持。
				</view>
				<view class="tips" v-if="form.status==4">
					备注：{{form.handleRemark?form.handleRemark:'暂无'}}
				</view>
				<view class="tips" v-if="form.status==3">
					驳回原因：{{form.rejectRemark?form.rejectRemark:'暂无'}}
				</view>
			</view>
			<view class="info-item" v-if="form.status==2">
				<view class="title">
					办理结果
				</view>
				<view class="small-title">
					处理内容：
				</view>
				<view class="tips" v-if="form.remark!==''">
					{{form.remark}}
				</view>
				<view class="tips" v-else>
					已办结
				</view>
				<view class="small-title">
					办理人姓名：
				</view>
				<view class="project">
					{{form.processedName?form.processedName:'暂无'}}
				</view>
				<view class="small-title">
					办理人电话：
				</view>
				<view class="project">
					{{form.processedMobile?form.processedMobile:'暂无'}}
				</view>
				<view class="small-title">
					提交时间：
				</view>
				<view class="project">
					{{form.createTime}}
				</view>
				<view class="small-title">
					办结时间：
				</view>
				<view class="project">
					{{form.processingTime}}
				</view>
			</view>
			<view class="info-item" v-if="form.status==2">
				<view class="title">
					投诉信息
				</view>
				<view class="small-title">
					⽤⼈单位名称：
				</view>
				<view class="project">
					{{form.unitName}}
				</view>
				<view class="small-title">
					劳动⽤⼯地址：
				</view>
				<view class="project">
					{{form.address}}
				</view>
				<view class="small-title">
					投诉⼈姓名：
				</view>
				<view class="project">
					{{form.reflectorName}}
				</view>
				<view class="small-title">
					投诉⼈⼿机号：
				</view>
				<view class="project">
					{{form.reflectorMobile}}
				</view>
			</view>
		</view>
		<view class="btn-item" @click="navigate('/pages/index/complaint/index')" v-if="form.status==3">
			<view class="btn">重新提交</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData
	} from '@/util/util.js'
	import {
		selectSchedule
	} from '@/api/consult.js'
	export default {

		data() {
			return {
				tabType: 3,
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				form: {}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				selectSchedule({
					code: this.code
				}).then((res) => {
					uni.hideLoading()
					this.form = res
					console.log(this.form)
				}).catch((res) => {
					uni.hideLoading()
				})
			}
		},
		onLoad(e) {
			console.log(e)
			this.custom = getCustomNavData();
			this.code = e.code
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;

		.top {
			position: relative;
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					z-index: -1;
				}
			}


		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			margin-top: -35rpx;

			.info-item {
				// position: absolute;
				// bottom: 40rpx;
				// left: 30rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// align-items: center;
				width: 100%;
				// height: 155rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;
				margin-bottom: 30rpx;


				.title-left {
					display: flex;
					justify-content: space-between;

					.cod {
						color: #000;
						font-weight: 900;
						font-size: 35rpx;
					}

				}

				.title {
					font-size: 40rpx;
					margin: 20rpx 0;
					font-weight: 900;
				}

				.small-title {
					margin: 20rpx 0;
					color: #767676;
				}

				.project {
					margin: 20rpx 0;
					font-weight: 900;

				}


			}

		}

		.string {
			width: 100%;
			height: 5px;
			background-color: #F7F7F7;
			margin: 30rpx 0;
		}

		.btn {
			width: 270rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
			background-color: #157DFA;
		}
	}
</style>